<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="UTF-8">
<title>商品支付</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript">
 　　document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
 </script>
 <style type="text/css">
 	body {
		font-size: 0.14rem;
		height: 5.5rem;
	}

	.allDiv {
		padding-top: 0.7rem;
		padding-bottom: 1.2rem;
		height: 100%;
		margin-top: 16%;
	}

	.amtDiv {
		height: 2rem;
		padding-top: 1.5%;
	}

	.imgDiv {
	
	}

	.buttonDiv {
		height: 2rem;
		padding-top: 10%;
	}
	
	.payButton {
		height: 0.8rem;
		width: 2.5rem;
		background-color: #4EB741;
		font-size: 0.3rem;
		color: white;
		border: none;
		border-radius: 5rem;
	}
	
	.img {
		height: 3.2rem;
		width: 5.2rem;
	}
	
	.smallDiv {
		height: 50%;
		margin: auto;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
	
	.text1 {
		font-size: 0.40rem;
	}
	
	.text2 {
		font-size: 0.32rem;
	}
	
	#nouse {
		margin-bottom: -150px;
	}
	
	#circleS {
	    width: 2.5rem;
	    height: 2.5rem;
	    border-radius: 500px;
	    margin: auto;
	    background-color: #4EB741;
	    border: none;
	    text-align: center;
	    line-height: 2.5rem;
	    font-size: 0.9rem;
	    color: white;
	}
	
	.tatusText{
		font-size: 0.32rem;
		padding-top: 0.3rem;
	}
	
	.pwdDiv{
		padding-bottom: 0.3rem;
	}
	
	#circleF {
		width: 2.5rem;
	    height: 2.5rem;
		border-radius: 500px;
		margin: auto;
		background-color: #F6635C;
		border: none;
		text-align: center;
		line-height: 2.5rem;
		font-size: 1.2rem;
		color: white;
	}
	
	.goodsPrice{
		border: none;
		
	}
	
	input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; } 
 </style>
 
</head>
<body>

	<div align="center" class="allDiv">
		<input type="hidden" id="openid" th:value="${openid}">
		<input type="hidden" id="goodsId" th:value="${goodsId}">
		<input type="hidden" id="nickname" th:value="${nickname}">
		<input type="hidden" id="price" th:value="${price}">
		<input type="hidden" id="platformId" th:value="${platformId}">
		<input type="hidden" id="merchantId" th:value="${merchantId}">
		<div class="amtDiv" align="center">
			<h1 class="text1">您选择的商品价格为</h1>
			<h2 class="text2" th:text="${goodsPrice}"></h2>
		</div>

		<div class="imgDiv" align="center">
			<img th:src="${goodsPic}" class="img" />
		</div>

		<div class="buttonDiv" align="center">
				<p>
					<input type="Submit" id="submit_btn" value="微信支付" class="payButton" onclick="pay()"/>
				</p>
		</div>
	</div>
	
	
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
	
	$(function(){
		
		var data = {};
		data.goodsId = document.getElementById('goodsId').value;
		data.platformId = document.getElementById('platformId').value;
		data.merchantId = document.getElementById('merchantId').value;
		data.openid = document.getElementById('openid').value;
		data.nickname = document.getElementById('nickname').value;
		
		$.ajax({
			type: "POST",//传输方式
			contentType: "application/json",
			url: "qrGoods/recordingScanningNum",//action路径
			data: JSON.stringify(data),
			success: function(msg){
				//调用成功后执行操作
				console.log(msg)
			}
		});
	})
	
	function pay() {
		
		var data = {};
		data.platformId = document.getElementById('platformId').value;
		data.merchantId = document.getElementById('merchantId').value;
		data.orderAmt = document.getElementById('price').value;
		data.payAmt = document.getElementById('price').value;
		data.body = '商品二维码';
		data.payCode = '1';
		data.openId = document.getElementById('openid').value;
		data.payType = '2';
		data.scenesCode = 'scenes001';
		data.payChannelNo = 'wechat003';
		data.payCompanyNo = 'WECHAT';
		var extMap = {};
		extMap.goodsId = document.getElementById('goodsId').value;
		extMap.nickname = document.getElementById('nickname').value;
		
		data.extMap = JSON.stringify(extMap);
		
		var platformId = document.getElementById('platformId').value;
		var merchantId = document.getElementById('merchantId').value;
		var goodsId = document.getElementById('goodsId').value;
		
		$.ajax({
			type: "POST",//传输方式
			contentType: "application/json",
			url: "pay/createAndPay",//action路径
			data: JSON.stringify(data),
			success: function(msg){
				//调用成功后执行操作
				console.log("支付结果。。。。。。",msg)
				if('0000' == msg.code){
					WeixinJSBridge.invoke(
		            	'getBrandWCPayRequest', {
		                	"appId": msg.payObject.appid, //公众号名称，由商户传入
		                	"timeStamp": msg.payObject.timestamp, //时间戳
		                	"nonceStr": msg.payObject.noncestr, //随机串
		                	"package": msg.payObject.package,
		                	"signType": "MD5", //微信签名方式
		                	"paySign": msg.payObject.sign  //微信签名
		            	}, function (res) {
		                	if (res.err_msg == "get_brand_wcpay_request:ok") {
		                		window.location.href='paySuccess?platformId='+platformId+"&merchantId="+merchantId+"&goodsId="+goodsId;
		                	} else {
		                		window.location.href='payFail';
		                	}
		            	}
		            );
				}else{
					window.location.href='payFail';
				}
			}
		});
		if (typeof WeixinJSBridge == "undefined"){
			   if( document.addEventListener ){
			       document.addEventListener('WeixinJSBridgeReady', pay, false);
			   }else if (document.attachEvent){
			       document.attachEvent('WeixinJSBridgeReady', pay); 
			       document.attachEvent('onWeixinJSBridgeReady', pay);
			   }
		}else{
			   onBridgeReady();
		}
		
	}
	
 	</script>
</body>
</html>